<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>客户端工具</title>
    <link rel="stylesheet" href="style/bootstrap.css">
    <link rel="stylesheet" href="style/main.css">
    <script type='text/javascript' src='style/jquery-2.2.1.min.js'></script>
    
    <script type='text/javascript' src='tinymce/js/tinymce/tinymce.min.js'></script>
    <script>
    var CONTENT = 0
    var url = location.search.split("?")[1];
    var tinymceEdit = null;
  function initEdit(id){
  tinymceEdit=tinymce.init({
  selector: "textarea#"+id,
  height: 200,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime nonbreaking table contextmenu directionality',
    'paste textcolor colorpicker textpattern'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'preview code | forecolor backcolor',
 
  content_css: [
    "//27.131.221.168/serverlist/res/html/css/fpop.css",
    "tinymce/fpop.css"
  ]
 });
  }  
  function addhtmledit(index,title,status,content,checked){
    $("#htmldata").prepend('<div id="content'+index+'"><div><input id="inputtitle'+index+'" type="input" style="width:80%" value="'+title+'" />'+
      '<label for="check'+index+'">展开</label>：<input id="check'+index+'" type="checkbox" '+(checked?'checked="checked"':"")+'" />&nbsp;'+
      '<select id="status'+index+'"><option value="">无</option><option value="new">new</option><option value="hot">hot</option></select>'+
      '<a href="javascript:deleteitem('+index+')" class="btn btn-primary">删除</a></div><div><textarea style="width:100%" id="textarea'+index+'" disabled="disabled">'+content+'</textarea></div></div>')
    initEdit("textarea"+index)
    $("#status"+index).val(status)
  }
  function deleteitem(index){
    $("#content"+index).remove()
  }
  function edititem(index){
    
  }
  $(document).ready(function(){
    $("#create").click(function(){
      addhtmledit(CONTENT++,"添加标题","new","添加内容",true)
    })
    $("#previewbtn").click(function(){
      var htmldata = $("#htmldata")

      var textareas = htmldata.find("textarea")
      var totles = textareas.length;
      var index_li = 1
      var htmlContent = ""
      textareas.each(function(i){
        var id = $(textareas[i]).attr("id")
        var index = id.replace("textarea","");
        var inputtitle=$("#inputtitle"+index).val()
        var content = tinymce.get(id).getContent()
        var isopen = $("#check"+index).is(':checked')
        var status = $("#status"+index).val()
        htmlContent+='<li onclick="isHide('+index_li+','+totles+');"><a class="zt1 active" href="javascript:;" title="'+inputtitle+'"><span class="lt">'+inputtitle+'</span><span class="lt"></span><span class="rt '+status+'"></span></a></li><div class="zk_block" id="zk_block_'+index_li+'" '+(isopen?'':'style="display:none"')+'>'+content+'</div>'
        
        index_li++
      })
      htmlContent='<!doctype html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="utf-8"><meta name="apple-touch-fullscreen" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><link rel="icon" href="favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><meta name="description" content=""><title>游戏公告</title><link rel="stylesheet" type="text/css" href="css/fpop.css"></head><body><section class="pop1"><section class="pop1_top"><img src="'+($("#imagurl").val()!=""?$("#imagurl").val():"/serverlist/res/html/logo.jpg")+'" width="620" height="260" alt=""></section><section class="pop1_bot"><ul class="zk">'+htmlContent+'</ul></section></section><script type="text/javascript"> function isHide(obj,count){for(var i=1;i<=count;i++){if(i!= obj) { document.getElementById("zk_block_"+i).style.display="none"}}  var objs = document.getElementById("zk_block_"+obj);objs.style.display=objs.style.display=="none"?"":"none";}<\/script></body></html>'
      console.log(htmlContent)
      $.ajax({
          type: "POST",
          url: "cgi-bin/serverlistutils.py",
          data: {actiontype:"sethtmldata",
                serverlist:url,
                serverdata:htmlContent
              },
          success: function(msg){
            alert( "保存成功" );
          },
          error:function(){
            alert( "运行失败" );
          }
        });
    })

    $("#upload_file").change(function(){
          if($("#upload_file").val() != '') $("#submit_form").submit();
    });
      //iframe加载响应，初始页面时也有一次，此时data为null。
    $("#exec_target").load(function(){
        var data = $(window.frames['exec_target'].document.body).html();
          //若iframe携带返回数据，则显示在feedback中
        if(data != null){
          $("#imagurl").val(data)
        }
    });

    $.ajax({
          type: "POST",
          url: "cgi-bin/serverlistutils.py",
          data: "actiontype=gethtmldata&serverlist="+url,
          success: function(msg){
            var htmldata = $(msg)
            $("#imagurl").val($(htmldata.find("img")[0]).attr("src"))
            var lis = $($.makeArray(htmldata.find("li")).reverse());
            lis.each(function(i){
              CONTENT=i+1
              var li = $(lis[i])
              var status = ""
              var isnew = li.find("span.new").length>0;
              if (!isnew){
                  isnew=  li.find("span.hot").length>0;
                  if(isnew){
                    status="hot"
                  }
              }else{
                status="new"
              }
              var zk_block=htmldata.find("#zk_block_"+(lis.length-i))
              addhtmledit(i,li.find("span.lt").text(),status,zk_block.html(),zk_block.css("display")!="none")
            })
          },
          error:function(){
            alert( "运行失败" );
          }
        });
  })
  </script>
  </head>

<body>
<div id="loading" style=" display: none;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5; position: fixed; width: 100%; height: 100%; background-color: rgb(171, 162, 162); z-index: 9999;margin: 0;text-align: center;font-size: 30;"><span class="h1" >运行中，请稍后。。。。 请不要关闭浏览器<span></span></div>
<ul class="lead" >
<li>
<a href="javascript:void(0)" class="btn btn-primary" id="create">添加</a>
<a href="javascript:void(0)" class="btn btn-primary" id="previewbtn">发布</a>
</li>
<li>
<form id="submit_form" method="post" action="/cgi-bin/submit_form_process.py" target="exec_target" enctype="multipart/form-data">
  <input type="file" name="upload_file" id="upload_file" accept="image/png,image/gif,image/jpeg">
</form>
<iframe id="exec_target" width="1px" height="1px"  name="exec_target"></iframe> 
</li>
<li>
  <span>图片地址</span><input type="input" style="width:80%" id="imagurl" />
</li>
<li id="htmldata" ></li>
</ul>

</body>
</html>
